<script>
    import { onMount } from 'svelte';
    import { goto } from '$app/navigation';
    import { Notyf } from 'notyf';
  
    let userType = "comuser";
    let username = "";
    let phoneNumber = "";
    let idNumber = "";
    let email = "";
    let password = "";
    let notyf = new Notyf();
  
    
    async function handleRegister() {

        if (!username || !phoneNumber || !idNumber || !email || !password) {
            notyf.error('请填写完整的注册信息');
            return;
        }
        const formData = {
            userType:userType,
            username:username,
            phonenumber:phoneNumber,
            idnumber:idNumber,
            email:email,
            password:password
        };
        try {
        // 尝试执行的代码
        const response = await fetch('/api/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log(data);
        notyf.success('Registration successful');
        setTimeout(() => {
				goto('/');
				}, 1500);
        } catch (error) {
        // 捕获错误并进行处理
        console.error('Registration error:', error);
        notyf.error('Failed to register');
        }
    }

onMount(() => {
    const notyf = new Notyf({
        duration: 2000,
        position: {
            x: 'right',
            y: 'top'
        }
    });
});

</script>
  
<style>
    /* 将选择框的宽度设置为与输入框相同的百分比 */
select {
  width: 97%; /* 或者调整为其他百分比值 */
  font-size: 18px; /* 可以根据需要调整字体大小 */
  color: #333;
  background: #f9f9f9;
  padding: 12px;
  outline: none;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

  
    /* 将输入框的宽度设置为 80% */
    input[type="text"],
    input[type="password"] {
      width: 95%;
      font-size: 18px;
      color: #333;
      background: #f9f9f9;
      padding: 12px;
      outline: none;
      margin-top: 10px;
      border-radius: 5px;
      box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
  
    /* 按钮样式 */
    button {
      margin-top: 20px;
      width: 100%;
      height: 45px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 45px;
      font-size: 16px;
      background-image: linear-gradient(to right, #30cfd0, #330867);
      cursor: pointer;
      transition: background-image 0.3s ease;
    }
  
    button:hover {
      background-image: linear-gradient(to right, #330867, #30cfd0);
    }
  
    /* 容器样式 */
    .input-container {
      width: 80%;
      margin: 0 auto; /* 居中显示 */
      padding: 20px;
      background-color: rgba(255, 255, 255, 0.9); /* 背景透明度 */
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
  </style>
  
  <div class="input-container">
    <select bind:value={userType}>
      <option value="comuser">普通用户</option>
      <option value="business">商户</option>
    </select>
  
    <input type="text" bind:value={username} placeholder="请输入用户名" />
    <input type="text" bind:value={phoneNumber} placeholder="请输入手机号" />
    <input type="text" bind:value={idNumber} placeholder="请输入身份证号" />
    <input type="text" bind:value={email} placeholder="请输入邮箱" />
    <input type="password" bind:value={password} placeholder="请输入密码" />
  
    <button on:click={handleRegister}>注册</button>
  </div>
  